<template>
	<label for="avatar" class="label">
		
		<uv-image
		 :src="$str.avatar(model)" mode="aspectFill"
		 :width="size"
		 :height="size"
		 v-if="model"
		 radius="50%"
		></uv-image>
		<template v-else>
			<slot name="empty"  v-if="$slots.empty"></slot>
			<view class="empty round f24 c6 t-flex center" v-else 
			:style="{
				width:size,
				height:size
			}"
			>
				选择头像
			</view>
		</template>
		
		<button open-type="chooseAvatar" style="display: none;" id="avatar" @chooseavatar="chooseavatar"></button>
	</label>
	
	
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { upload } from '../../lib/ts/util';


	const emit = defineEmits(['update:modelValue'])
	
	let props = defineProps({
		size:{
			type:String,
			default:'120rpx'
		},
		modelValue:{
			type:String,
			default:""
		}
	})
	
	
	const model = computed({
		get(){
			return props.modelValue
		},
		set(val){
			emit('update:modelValue',val)
		}
	})
	
	
	const chooseavatar = (e)=>{
		upload(e.detail.avatarUrl)
		.then(res=>{
			model.value = res.data.url
		})
	}
	
	
</script>


<style scoped lang="scss">
	.empty{
		background-color: #e5e5e5;
	}
	.label{
		display: inline-block;
	}

</style>